<!DOCTYPE>
<html>

<head>
  <meta charset="utf-8">
  <title>IFE JavaScript Task 18</title>
  <script src="js/task18.js"></script>
  <style>
  .box {
    margin-top: 20px;
    overflow: hidden;
  }

  .box .items {
    float: left;
    margin-left:10px;
    margin-top:10px;
    font-size: 20px;
    font-weight: bold;
    border: 1px solid #565656;
    background-color: #ccc;
  }
  </style>
</head>

<body>
  <fieldset>
    <legend>说明</legend>
    <dl>
      <dt>任务目的</dt>
      <dd>学习与实践JavaScript的基本语法、语言特性</dd>
      <dd>初步了解JavaScript的事件是什么</dd>
      <dd>初步了解JavaScript中的DOM是什么</dd>
    </dl>
    <dl>
      <dt>任务目的</dt>
      <dd><a target="_blank" href="http://7xrp04.com1.z0.glb.clouddn.com/task_2_18_1.jpg">如图</a>，模拟一个队列，队列的每个元素是一个数字，初始队列为空</dd>
      <dd>有一个input输入框，以及4个操作按钮</dd>
      <dd>点击"左侧入"，将input中输入的数字从左侧插入队列中；</dd>
      <dd>点击"右侧入"，将input中输入的数字从右侧插入队列中；</dd>
      <dd>点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；</dd>
      <dd>点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；</dd>
      <dd>点击队列中任何一个元素，则该元素会被从队列中删除</dd>
    </dl>
  </fieldset>
  <input id="input" type="number" />
  <button id="leftin">左侧入</button>
  <button id="rightin">右侧入</button>
  <button id="leftout">左侧出</button>
  <button id="rightout">右侧出</button>
  <div id="box" class="box">
  </div>
</body>

</html>
